<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <!--无数据提示 开始-->
    <section th:if="${#lists.isEmpty(dataMap['list'])}" class="no-data__wrap">
        <span class="no-data-ico"></span>
        <p class="mt20"><span class="c-666">抱歉，还没有课程，试试其吧~~~</span></p>
    </section>
    <section th:if="!${#lists.isEmpty(dataMap['list'])}" class="row">
        <div class="col-md-4 col-lg-4" th:each="smallCourse : ${dataMap['list']}">
            <div class="thumbnail live-list-item">
                <div class="live-caption">
                    <div class="pt10 mt5">
                        <section class="cm-desc-txt__twoLine">
                            <a th:href="@{/web/course/smallClassInfo?courseId={courseId}(courseId=${smallCourse['id']})}" class="fs18 c-333">
                                <b th:text="${smallCourse['courseName']}">初中新概念一册精读直播课（Lesson41-90）</b>
                            </a>
                        </section>
                        <section class="hLh30 mt10 fs14 c-333 ">
                            <i class="fa fa-clock-o vam"></i>
                            <span class="vam" th:text="${#strings.substring(smallCourse['openTime'],0,16)}">10月10日</span>
                            <span class="vam ml5 mr5">至</span>
                            <span class="vam" th:text="${#strings.substring(smallCourse['endTime'],0,16)}">12月21日第周日晚上18:00-21:00</span>
                        </section>
                        <section class="sc-teacher-item mt20 clearfix">
                            <span class="live-t-img vam" th:if="${!#lists.isEmpty(smallCourse['teacherList'])} and ${index.index}==0" th:each="teacher,index:${smallCourse['teacherList']}">
                                <img th:alt="${teacher['teacherName']}" th:src="${teacher['imageMap']['pcUrlMap']['large']}"  th:attr="data-original=${teacher['imageMap']['pcUrlMap']['large']}" class="media-object img-circle lazy-user vam" width="56" height="56"/>
                                <span class="fs12 c-999 mt5" th:text="'授课 '+${teacher['teacherName']}">授课 李小龙</span>
                            </span>

                            <span class="pull-left ml5 hand vam mt5 pt10 c-ccc " th:attrappend="class='img_'+${smallCourse['id']}" th:if="${!#lists.isEmpty(smallCourse['teacherList'])} and ${smallCourse['teacherList'].size()}>1" th:each="teacher,index:${smallCourse['teacherList']}"  data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content=""
                                  data-original-title="<img src='https://fimage.268xue.com/upload/0/yzl/common/2018100810/5f6fcddaf59035841ce2499ef7e118f8_jpg/pc/large.jpg' class='img-circle lazy vam mr5' width='34' height='34'><img src='https://fimage.268xue.com/upload/0/yzl/common/2018100810/5f6fcddaf59035841ce2499ef7e118f8_jpg/pc/large.jpg' class='img-circle lazy vam mr5' width='34' height='34'>"
                                  title="">
                                <script th:inline="javascript" type="text/javascript">
                                    var im=[[${smallCourse['teacherList']}]];
                                    var imgs='';
                                    $.each(im,function (i,val) {
                                        imgs+= "<img src='"+val.imageMap.mobileUrlMap.large+"' class='img-circle lazy vam mr5' width='34' height='34'>";
                                    });

                                   $(".img_"+[[${smallCourse['id']}]]).attr('data-original-title', imgs);
                                </script>
                                <i class="fa fa-ellipsis-h" aria-hidden="true" th:if="${smallCourse['teacherList'].size()}==${index.count}"  title="更多"></i>
                            </span>



                            <aside class="pull-right mt20 pt10">
                                <span class="label label-warning fs12" th:if="${smallCourse['buyNum']}-${smallCourse['courseProfile']['buyCount']}>0">
                                    <span>还剩</span>
                                    <span th:text="${smallCourse['buyNum']}-${smallCourse['courseProfile']['buyCount']}"></span>
                                    <span>个名额</span>
                                </span>
                                <span class="label label-warning fs12" th:if="${smallCourse['buyNum']}-${smallCourse['courseProfile']['buyCount']}<=0">名额已满</span>
                            </aside>
                        </section>
                        <hr>
                        <section class="clearfix">
                            <aside class="pull-left mt10">
                                <span class="fs12 c-999">共<span th:if="${smallCourse['nodeNum']}!=null" th:text="${smallCourse['nodeNum']}"></span>讲</span>
                                <span class="mml10 fs12 c-danger" th:if="${smallCourse['limitDay']}>0 and ${smallCourse['limitDate']}!=null" th:text="'距离停售还有'+${smallCourse['limitDay']}+'天'"></span>
                                <span class="mml10 fs12 c-danger" th:if="${smallCourse['limitDay']}<=0 and ${smallCourse['limitDate']}!=null">此课已停售，请关注其它</span>
                            </aside>
                            <aside class="pull-right">
                                <span class="fs12 c-price" th:if="${smallCourse['realPrice']} > 0" >
                                    <i class="fa fa-rmb"></i>
                                    <span class="fs18" th:text="${smallCourse['realPrice']}">0</span>
                                </span>
                                <span class="fs18 c-free" th:if="${smallCourse['realPrice']} <= 0">免费</span>
                                <s class="fs12 c-999 ml5" th:text="'￥'+${smallCourse['orPrice']}">￥896.0</s>
                            </aside>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 分页，开始 -->
    <div data-th-replace="layout/webPage"></div>
    <!-- 分页，结束 -->
</html>